<template>
  <div>
    <div class="legend g-legend-wrapper">
            <span class="g-legend-title g-font-f4">
              <span class="g-font-f5">{{currentTime}}</span>
            </span>
      <div class="g-legend-content">
              <span class="g-font-f5 g-legend-item orange">解禁市值
                <span class="number">{{amount}}</span>亿元
              </span>
        <span class="g-font-f5 g-legend-item blue">上证指数
               <span class="number">{{shIndex}}</span>
               </span>
      </div>
    </div>
    <div class='chart'></div>
  </div>
</template>
<script>
  import echarts from 'echarts/lib/echarts';
  import constant from '@/common/constant'
  const chartConfig = constant.chartConfig;
  export default {
    name: 'last-month',
    data() {
      return {
        shIndex: 0,
        amount: 0,
        currentTime: ''
      }
    },
    props: {
      chartData: {}
    },
    methods: {
      chartSelected(params) {
        let index = params[0].dataIndex;
        this.currentTime = params[0].axisValue
        Object.assign(this.$data, {
          shIndex: this.chartData.shIndex[index],
          amount: this.chartData.amount[index]
        });
      },
      redraw() {
        let options = {
          color: ['#ff8420', '#6c9bd2'],
          tooltip: {
            formatter: this.chartSelected,
            ...chartConfig.tooltip
          },
          xAxis: [
            {
              type: 'category',
              data: this.chartData.xTime,
              boundaryGap: false,
              splitLine: chartConfig.splitLine,
              axisTick: chartConfig.axisTick,
              axisLine: chartConfig.axisLine,
              axisLabel: chartConfig.axisLabel
            }
          ],
          yAxis: [
            {
              min: 70,
              name: '解禁市值(亿元)',
              position: 'left',
              type: 'value',
              splitLine: chartConfig.splitLine1,
              axisLabel: chartConfig.axisLabel,
              axisTick: chartConfig.axisTick,
              nameTextStyle: chartConfig.nameTextStyle,
              axisLine: chartConfig.axisLine1
            },
            {
              min: 2900,
              max: 3300,
              name: '上证指数',
              nameTextStyle: chartConfig.nameTextStyle,
              type: 'value',
              splitLine: chartConfig.splitLine,
              axisLabel: chartConfig.axisLabel,
              axisTick: chartConfig.axisTick,
              axisLine: chartConfig.axisLine1
            }
          ],
          grid: {
            top: '15%',
            bottom: '15%',
            left: '15%',
            right: '15%'
          },
          series: [
            {
              lineStyle: {
                normal: {
                  color: '#E97311',
                  width: 1
                }
              },    // 折线样式
              name: `解禁市值(亿元)`,
              data: this.chartData.amount,
              type: 'line',
              symbol: 'none'
            },
            {
              lineStyle: chartConfig.lineStyle,
              name: `上证指数 `,
              data: this.chartData.shIndex,
              yAxisIndex: 1,
              type: 'line',
              smooth: true,
              symbol: 'none'
            }
          ]
        };
        this.myChart.setOption(options);
        this.$store.dispatch('ctrlLoading', false);
      },
      legendInit () {
        let len = this.chartData.xTime.length - 1;
        this.currentTime = this.chartData.xTime[len];
        this.shIndex = this.chartData.shIndex[len];
        this.amount = this.chartData.amount[len]
      }
    },
    mounted() {
      this.myChart = echarts.init(document.querySelector('.chart'));
    },
    watch: {
      chartData: function () {
        this.legendInit();
        this.redraw();
      }
    },
    beforeDestroy () {
      echarts.dispose(this.myChart);
    }
  }
</script>
<style lang="less" scoped>
  .chart{
    width: 100%;
    height: 2.4rem;
  }
  .g-legend-title{
    display: inline-block;
    width: .75rem;
    height: .16rem;
    text-align: left;
  }
  .g-legend-item{
    padding-right: .1rem;
    width: 41%;
  &:before {
     margin-right: .05rem;
   }
  }
</style>
